<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8" />
    <title>Document</title>
    <style type="text/css">
        *{
            margin: 0;
            padding: 0;
        }
        img{
            border:0;
        }
        ol, ul ,li{list-style: none;}
        .list{
            width: 150px;
            margin:0 auto;
        }
        h5{
            width: 150px;
            height: 35px;
            background:skyblue;
        }
        li>ul>li{
            height:35px;
            background:blue;
        }
        .list_li{
            height:35px;
            overflow:hidden;
            transition: height 0.8s ease-in;
        }
        .list_li:hover{
            height:175px;
        }
        li{
            width: 150px;
            line-height:35px;
            transition:background 0.8s ease-in;
        }
        li:hover{
            background:darkblue;
        }
    </style>
</head>
<body>
    <ul class="list">
        <li class="list_li">
            <h5>one</h5>
            <ul>
                <li>1</li>
                <li>2</li>
                <li>3</li>
                <li>4</li>
            </ul>
        <>
        <li class="list_li">
            <h5>one</h5>
            <ul>
                <li>1</li>
                <li>2</li>
                <li>3</li>
                <li>4</li>
            </ul>
        <>
        <li class="list_li">
            <h5>one</h5>
            <ul>
            <li>1</li>
            <li>2</li>
                <li>3</li>
                <li>4</li>
            </ul>
        <>
    </ul>
</body>
	</html>
